<template>
  <div class="login">
    <el-form
      label-position="light"
      :model="data"
      style="max-width: 80%"
      class="form"
    >
      <div style="display: flex; justify-content: space-between">
        <h1 class="title">请登录</h1>
        <el-button
          type="primary"
          class="btn"
          style="width: 5rem"
          @click="showDia"
          >注册用户</el-button
        >
      </div>

      <el-form-item label="">
        <el-input v-model="data.username" placeholder="输入用户名" />
      </el-form-item>
      <el-form-item label="">
        <el-input
          v-model="data.password"
          placeholder="输入密码"
          type="password"
        />
      </el-form-item>
      <el-button type="primary" class="btn" @click="loginFn">登录</el-button>
    </el-form>

    <el-dialog
      v-model="dialogVisible"
      title="注册"
      width="500"
      :before-close="handleClose"
    >
      <el-form-item label="">
        <el-input v-model="data.username" placeholder="输入用户名" />
      </el-form-item>
      <el-form-item label="">
        <el-input
          v-model="data.password"
          placeholder="输入密码"
          type="password"
        />
      </el-form-item>
      <el-button type="primary" class="btn" @click="register">确定</el-button>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { userStore } from "../../store/index";

const dialogVisible = ref(false);

const userStoreHandler = userStore();
const router = useRouter();
let data = reactive({
  username: "admin",
  password: "111111",
});

const loginFn = async () => {
  console.log(data.username);
  console.log(data.password);
  await userStoreHandler.saveUserInfo({
    username: data.username,
    password: data.password,
  });
  // 实现路由跳转
  router.replace({
    name: "Home",
  });
};

// 注册用户
const register = async () => {
  console.log(data.username);
  console.log(data.password);
  await userStoreHandler.registerUser({
    username: data.username,
    password: data.password,
  });
};

const handleClose = () => {
  dialogVisible.value = false;
};
const showDia = () => {
  console.log("xxxxxxxxxxxxxxx");

  dialogVisible.value = true;
};
</script>

<style scoped lang="scss">
.login {
  display: flex;
  height: 100%;
  background: linear-gradient(to bottom, rgb(84, 154, 214), rgb(192, 192, 191));
  .form {
    margin: auto;
    background-color: #fff;
    padding: 1rem;
    border-radius: 10px;
    .btn {
      text-align: center;
      width: 100%;
    }
  }
  .title {
    font-size: 1.5rem;
    text-align: center;
    font-weight: bolder;
    margin-bottom: 1rem;
  }
}
</style>
